<template>
    <el-drawer v-model="userCenterShow" @close="toClose" size="360px" :destroy-on-close="true" :show-close="true" :with-header="false">
        <div class="padding">
            <el-form :model="form" label-width="80px" style="max-width: 400px">
                <el-form-item label-width="80px">
                    <h1>账号信息</h1>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.userName" :disabled="true"  />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input maxlength="6" minlength="1" v-model="form.name" />
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        :action="action"
                        :show-file-list="false"
                        accept="image/*"
                        :headers="{'Access-Token':token}"
                        :on-success="handleAvatarSuccess"
                    >
                        <img v-if="form.avatar" :src="form.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label-width="80px">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="toClose">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-drawer>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, computed, PropType, watch } from 'vue';
import { useRouter, useRoute, useLink } from "vue-router";

import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElNotification } from 'element-plus'
import useCurrentInstance from "@/common/useCurrentInstance";
const { proxy } = useCurrentInstance();
import { useAppStore } from '@/store/modules/app';
import { useSettingStore } from '@/store/modules/setting';
import { useUserStore } from '@/store/modules/user';
const settingStore = useSettingStore();
const userStore = useUserStore();
const appStore = useAppStore();
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
    if(response.code==200){
        form.avatar=response.data.url;
    }else{
        ElNotification({
            title: '提示',
            message: response.msg,
            type: 'warning',
        });
    }
}

const token = appStore.token;
const action=ref(import.meta.env.VITE_APP_BASE_URL+'admin/api/v1/upload/picture');
const userCenterShow = computed(() => {
    return userStore.userCenterShow;
})
const form=reactive({
    userName:userStore.info.userName,
    name:userStore.info.name,
    avatar:userStore.info.avatar,
    introduction:userStore.info.introduction,
    roles:userStore.info.roles
})
const toClose = () =>{
    userStore.addUserCenterShow(false);
}
const onSubmit = () => {
    // setInfo(form).then((response:any)=>{
        // console.info(response);
        userStore.addUserSetting(form);
        toClose();
    // }).catch((error:any)=>{
    //     console.info(error);
    // })
    
}
</script>
<style scoped>
    .avatar-uploader .avatar {
      width: 110px;
      height: 110px;
      display: block;
    }
    </style>
    
    <style>
    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    
    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 110px;
      height: 110px;
      text-align: center;
    }
    </style>